<template>
	<view class="container">
		<!-- 顶部红色矩形和边框组合 -->
		<view class="top-section">
			<view class="red-rectangle">
				<view 
					class="gray-rectangle" 
					:style="{ borderColor: selectedColor.gray }"
				></view>
				<view 
					class="black-rectangle" 
					:style="{ borderColor: selectedColor.black }"
				></view>
			</view>
		</view>
		
		<!-- 底部列表 -->
		<view class="list-section">
			<view 
				v-for="(item, index) in colorList" 
				:key="index"
				class="list-item"
				@click="selectColor(index)"
			>
				<view class="item-container">
					<view 
						class="small-gray-rectangle" 
						:style="{ borderColor: item.gray }"
					></view>
					<view 
						class="small-black-rectangle" 
						:style="{ borderColor: item.black }"
					></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前选中的颜色
				selectedColor: {
					gray: '#808080',
					black: '#000000'
				},
				// 颜色列表
				colorList: [
					{ gray: '#808080', black: '#000000' }, // 灰黑
					{ gray: '#FFFFFF', black: '#FFFFFF' }, // 白白
					{ gray: '#808080', black: '#FFFF00' }, // 灰黄
					{ gray: '#808080', black: '#FF00FF' }, // 灰五彩（这里用紫色代表五彩）
					{ gray: '#808080', black: '#808080' }  // 灰灰
				]
			}
		},
		methods: {
			// 选择颜色
			selectColor(index) {
				this.selectedColor = { ...this.colorList[index] };
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}
	
	/* 顶部红色矩形区域 */
	.top-section {
		margin-bottom: 40px;
	}
	
	.red-rectangle {
		width: 200px;
		height: 200px;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	.gray-rectangle {
		width: 100px;
		height: 120px;
		border: 2px solid;
		border-radius: 20px;
		background-color: transparent;
		box-sizing: border-box;
		position: absolute;
	}
	
	.black-rectangle {
		width: 96px;
		height: 116px;
		border: 5px solid;
		border-radius: 20px;
		background-color: transparent;
		box-sizing: border-box;
		position: absolute;
	}
	
	/* 底部列表区域 */
	.list-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 15px;
		width: 100%;
		max-width: 400px;
	}
	
	.list-item {
		width: calc(33.33% - 15px);
		display: flex;
		justify-content: center;
		margin-bottom: 15px;
	}
	
	.item-container {
		position: relative;
		width: 50px;  /* 缩放50% */
		height: 60px; /* 缩放50% */
		transform: scale(0.5);
		transform-origin: center center;
	}
	
	.small-gray-rectangle {
		width: 100px;
		height: 120px;
		border: 2px solid;
		border-radius: 20px;
		background-color: transparent;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.small-black-rectangle {
		width: 96px;
		height: 116px;
		border: 5px solid;
		border-radius: 20px;
		background-color: transparent;
		box-sizing: border-box;
		position: absolute;
		top: 2px;
		left: 2px;
	}
</style>